<!-- 弹窗 详情 -->
<script lang="ts" setup>
import type { FormInstance, FormRules } from "element-plus";

import {
	DEVICE_STATUS_OPTIONS,
	EQUIPMENT_TYPE_OPTIONS,
} from "@/config/enum-map";
import { whManagerBsTbEqpSaveOrUpdateUsingPost } from "@/genapi/wh";
import { useAsync } from "@/hooks/use-async";
import { useCompanyStore } from "@/stores/company";

import { injectState } from "../state";

defineOptions({ name: "DetailDialog" });

const companyStore = useCompanyStore();
const { page } = injectState()!;

const dialogRef = shallowRef<InstanceType<GlobalComponents["PromiseDialog"]>>();
const formRef = shallowRef<FormInstance>();

const dialogType = ref<"add" | "edit" | "detail" | string>();

const titleMap: Record<string, string> = {
	add: "新增",
	edit: "编辑",
	detail: "详情",
};

const beforeClose = async () => {
	if (dialogType.value !== "detail") {
		await ElMessageBox.confirm("确认关闭？");
	}
};

const trigger = async (type = "add", value = {} as any) => {
	dialogType.value = type;
	model.value = JSON.parse(JSON.stringify(value)) as any;
	await dialogRef.value?.open();
};

defineExpose({
	trigger,
});

const model = ref<Record<string, any>>({});

const rules: FormRules<typeof model.value> = {
	name: { required: true, message: "请输入设备名称", trigger: "blur" },
	type: { required: true, message: "请选择所属类型", trigger: "blur" },
	eqpCode: { required: true, message: "请输入设施编号", trigger: "blur" },
	eqpSpecifications: { required: true, message: "请输入规格", trigger: "blur" },
	eqpNum: { required: true, message: "请输入数量", trigger: "blur" },
	useDate: { required: true, message: "请选择使用日期", trigger: "blur" },
	checkDate: { required: true, message: "请输入检验日期", trigger: "blur" },
	status: { required: true, message: "请选择运行状态", trigger: "blur" },
};

const { execute, isLoading } = useAsync(async () => {
	await formRef.value?.validate();
	await ElMessageBox.confirm("确认提交？", "提示", {
		type: "warning",
	});
	await whManagerBsTbEqpSaveOrUpdateUsingPost({
		data: {
			enterpriseId: companyStore.companyInfo?.id,
			...model.value,
		},
	});
	ElMessage.success("提交成功");
	page.execute();
	dialogRef.value?.complete();
});
</script>

<template>
	<PromiseDialog
		ref="dialogRef"
		:title="titleMap[dialogType!]"
		:before-close="beforeClose"
		max-h="884px!"
		w="707px!"
	>
		<el-scrollbar>
			<el-form
				ref="formRef"
				:disabled="dialogType === 'detail'"
				:model="model"
				:rules="rules"
				inline
				label-position="top"
			>
				<el-form-item label="设备名称" prop="name" w="100%!">
					<el-input
						v-model="model['name']"
						placeholder="请输入设备名称"
						clearable
					/>
				</el-form-item>
				<el-form-item label="所属类型" prop="type" w="100%!">
					<el-select-v2
						v-model="model['type']"
						:options="EQUIPMENT_TYPE_OPTIONS"
						placeholder="请选择所属类型"
						clearable
					/>
				</el-form-item>
				<el-form-item label="设施编号" prop="eqpCode" w="100%!">
					<el-input
						v-model="model['eqpCode']"
						placeholder="请输入设施编号"
						clearable
					/>
				</el-form-item>
				<el-form-item label="规格" prop="eqpSpecifications" w="100%!">
					<el-input
						v-model="model['eqpSpecifications']"
						placeholder="请输入规格"
						clearable
					/>
				</el-form-item>
				<el-form-item label="数量" prop="eqpNum" w="100%!">
					<el-input-number
						v-model="model['eqpNum']"
						:min="0"
						placeholder="请输入数量"
						clearable
					/>
				</el-form-item>
				<el-form-item label="使用日期" prop="useDate" w="100%!">
					<el-date-picker
						v-model="model['useDate']"
						class="w-100%!"
						value-format="YYYY-MM-DD"
						placeholder="请选择使用日期"
						clearable
					/>
				</el-form-item>
				<el-form-item label="检验日期" prop="checkDate" w="100%!">
					<el-date-picker
						v-model="model['checkDate']"
						class="w-100%!"
						value-format="YYYY-MM-DD"
						placeholder="请选择检验日期"
						clearable
					/>
				</el-form-item>
				<el-form-item label="运行状态" prop="status" w="100%!">
					<el-select-v2
						v-model="model['status']"
						:options="DEVICE_STATUS_OPTIONS"
						placeholder="请选择运行状态"
						clearable
					/>
				</el-form-item>
			</el-form>
		</el-scrollbar>
		<template v-if="dialogType !== 'detail'" #footer>
			<el-button @click="dialogRef?.close()">取消</el-button>
			<el-button type="primary" :is-loading="isLoading" @click="execute()"
				>确认</el-button
			>
		</template>
	</PromiseDialog>
</template>
